<template>
  <div class="header">
    <span @click="click1" class="blue">{{ leftText }}</span>
    <span>{{ title }}</span>
    <span @click="click2" class="blue">{{ rightText }}</span>
  </div>
</template>
<script>
export default {
  // 接收属性：驼峰式命名
  props: ['title', 'leftText', 'rightText'],
  methods: {
      click1(){
          this.$emit('click-left')
      },
      click2(){
          this.$emit('click-right')
      },
  },
}
</script>
<style lang="less" scoped>
body {
  background: #ebebeb;
}
.header {
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  .blue {
    color: #1989fa;
  }
}
</style>
